<template>
  <div>
      <h1 @click="state.say(1800)">点击</h1>
      <h1 @click="send">子传父</h1>
      <input  @input="getData($event)"  />
      <div id="box">你好</div>
      <span id="world">世界</span>
  </div>
</template>
<script setup lang="ts">
  import {ref,reactive,computed,defineProps,onMounted} from 'vue'
  // vue3中的ref的ts写法

  let myname=ref<string>('小龙')
  console.log(myname)
  let arr=ref<number[]>([1,23,5])
  console.log(arr);
  // vue3中的reactive中的写法
  interface Istate {
     name:string,
     age:number,
     say(km:number):void
  }
  let state:Istate=reactive({
      name:"小王",
      age:18,
      say(km:number){
        console.log(km)
      }
  })
  // vue3中计算属性使用ts  computed<类型>(()=>{})
  let mylname=computed<string>(()=>{
    return myname.value+"人"
  })
  console.log(mylname)

// vue3中的父传子的defineProps 
  // let props=defineProps({
  //   list:{
  //     type:Array,
  //     default:[]
  //   },
  //   mytitle:{
  //     type:String
  //   }
  // })
let props=defineProps<{
        mylist:number,
        mytitle:string
    }>()
console.log(props)
  // defineProps的ts写法2
//  const { money, car = "宝马车" } = defineProps<{
//     money: number
//     car?: string
//  }>();
//  console.log(money,car)

// 

//  let emit=defineEmits(["sendDir","sendData"]);
    // 在ts 中生命defineEmits的ts写法
  let emit=defineEmits<{
    (e:"sendDir",dirname:string,kk:number):void
    (e:"sendData",data:string,bname:number):void
  }>()
  let send=()=>{
    emit('sendDir',"第一章",88)
  }
  // Event 事件对象的ts类型
  let getData=(e:Event)=>{
      console.log(e)
  }

  // ts中dom元素类型
  // HTMLElement html元素的类型
  // HTMLDivElement
  // HTMLPElement
  onMounted(()=>{
    let box=document.getElementById("box") as HTMLDivElement ;
    console.log(box)
    let pdom=document.getElementById("world") as HTMLSpanElement
    console.log(pdom)
  })

  // ts导入的内容 或安装的第三方插件都要有一个.d.ts 声明文件
    // declare ----
  
</script>